<template>
	<view class="main">
		<view class="tips">将以下藏品转赠给好友</view>
		<view class="goods">
			<image :src="info.thumb" mode="aspectFill"></image>
			<view class="cont">
				<view class="name">{{info.title}}</view>
				<view class="link">
					<view class="num">
						<image src="@/static/images/eth.png" mode=""></image>
						<text>{{info.chain_mark}}#{{info.code}}/{{info.all_count}}</text>
					</view>
				</view>
				<view class="des">{{info.user_name}}</view>
			</view>
		</view>
		<view class="Gtitle">请输入好友的区块链地址：</view>
		<u--textarea v-model="phone" placeholder="请输入好友的区块链地址" ></u--textarea>
		<view class="line" v-if="free>0">			
			<view class="price_t">手续费用</view>
			<view class="price_val">¥{{(free*1).toFixed(2)}}</view>
		</view>
		<u-button :disabled="!phone" :loading="loading" shape="circle" @click="confimzhuan" class="exchange">转赠</u-button>
		<view class="Gtitle">转赠说明</view>
		<view class="illustrate" v-html="content"></view>
		
		<u-modal :show="show" :showConfirmButton="false">
		<view class="show">
			<view class="show_t">确认消息</view>
			<view class="show_main">
				<view class="main_item">
					<view class="item_left">
						接受人
					</view>
					<view class="item_right">
						<image :src="memberobj.portrait" mode=""></image>
						{{memberobj.nickname}}
					</view>
				</view>
				<view class="main_item">
					<view class="item_left">
						接受人手机号
					</view>
					<view class="item_right">
						{{memberobj.mobile}}
					</view>
				</view>
				
			</view>
			<view class="show_but">
				<view @click="show=false">取消</view>
				<u-button class="btn" :loading="loading" size="small" @click="submit" text="确认转赠"></u-button>
			</view>
		</view>
		</u-modal>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				show:false,
				info:{},
				memberobj:{},
				content:'',
				phone:'',
				id:'',
				free:1,
				loading:false,
				title:'确认消息',
			}
		},
		onReady() {
			
		},
		onLoad(e) {
			this.id = e.id
			this.goodsInfo(e.id)
			this.getContent('transfer_description')
			this.getfree('transfer_fee_money')
		},
		methods: {
			// async showconfim(){
			// 	this.show=true;
			// 	let data = await this.$http({
			// 		url:this.$api.shift,
			// 		method: 'POST',
			// 		hideLoading: true,
			// 		needToken:true,
			// 		data:{
			// 			id:this.id,
			// 			is_check:1,
			// 			address:this.phone
			// 		}
			// 	})
			// 	// console.log('[藏品详情]',data)
			// 	if(data.code==200){
			// 		// this.info = data.data.info
			// 		console.log(data.data.info);
			// 	}
				
			// },
			async goodsInfo(id){
				let data = await this.$http({
					url:this.$api.goodsInfo,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id:id
					}
				})
				console.log('[藏品详情]',data)
				if(data.code==200){
					this.info = data.data.info
				}
			},
			async confimzhuan(){
				
					let data = await this.$http({
						url:this.$api.shift,
						method: 'POST',
						hideLoading: true,
						needToken:true,
						data:{
							id:this.id,
							is_check:1,
							address:this.phone
						}
					})
					// console.log('[藏品详情]',data)
					if(data.code==200){
						// this.info = data.data.info
						this.show=true;
						this.memberobj=data.data.member_info;
						console.log(data.data.info);
					}else{
						uni.showToast({
							title: data.msg,
							duration: 2000,
							icon:'none'
						})
					}
				
			},
			async submit(){
			
				this.loading = true
				let data = await this.$http({
					url:this.$api.createshiftOrder,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id  :this.id,
						paytype:'wechat',
						uid:this.memberobj.id,
						money:this.free
					}
				})
				this.loading = false
				console.log('[转赠]',data)
				if(data.code==200){
					if(this.free>0){
						let id=data.data.id
						if(id){
						this.topay(id)}else{
							uni.showToast({
								title: '支付失败',
								duration: 2000,
								icon:'none'
							});
						}
						
					// uni.requestPayment({
					//     provider: 'alipay',
					//     orderInfo: data.data.body, 
					//     success: (res)=> {
					//         console.log('[支付成功]',res);
					// 		uni.showToast({
					// 			title: '支付成功',
					// 			duration: 2000,
					// 			icon:'none'
					// 		});
					// 		setTimeout(()=>{
					// 			this.back(2)
					// 		},1500)
					//     },
					//     fail: (err)=> {
					// 		uni.showToast({
					// 			title: '支付失败',
					// 			duration: 2000,
					// 			icon:'none'
					// 		});
					//         console.log('[支付失败]',err);
					//     }
					// })
					}else{
						this.$u.toast('转赠成功')
						setTimeout(()=>{
							this.toPage('/pages/Mine/index')
						},1500)
						
					}
					// 
				}else{
					// this.$u.toast('暂未开放')
					// return
					uni.showToast({
					    title: data.msg,
						icon:'none',
					    duration: 2000
					});
				}
			},
			
			async getfree(e){
				let data = await this.getConfigDetail(e)
				console.log('[协议]',data)
				if(data.code==200){
					this.free = data.data.value
				}
			},
			async getContent(e){
				let data = await this.getConfigDetail(e)
				console.log('[协议]',data)
				if(data.code==200){
					this.content = data.data.value
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		// min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: $nft-bg-color;
		
		.show{
			display: flex;
			flex-direction: column;
			justify-content: center;
			    width: 100%;
			// background:pink;
			
			.show_t{
				font-size: 36rpx;
				font-weight: 600;
				color: #000000;
				line-height: 26px;
				text-align: center;
			}
			.show_main{
				display: flex;
				flex-direction: column;
				justify-content: center;
				// box-sizing: border-box;
				// padding:20rpx;
				.main_item{
					display:flex;
					justify-content: space-between;
					border-bottom:1rpx solid #D3D3D3;
					align-items: center;
					box-sizing: border;
					padding:15rpx 10rpx;
					margin: 20rpx 0;
					font-size: 26rpx;
					width: 100%;
					.item_right{
						display:flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 36rpx;
							border-radius: 100%;
							border: 1px solid #D3D3D3;
							margin-right: 10rpx;
						}
					}
				}
				.main_item:nth-child(2){
					border-top:none;
				}
				
			}
			.show_but{
				display:flex;
				justify-content: space-between;
				margin-top: 38rpx;
				font-size: 32rpx;
				view:nth-child(1){
					background: #FFFFFF;
					border-radius: 8px;
					width: 45%;
					height: 68rpx;
					border-radius: 2px;
					border: 1px solid #EFBE62;
					text-align: center;
					line-height: 68rpx;
				}
				.btn{
					background: #EFBE62;
					color: #000000;
					border-radius: 8px;
					width: 45%;
					height: 68rpx;
					border-radius: 2px;
					border: 1px solid #EFBE62;
					text-align: center;
					line-height: 68rpx;
				}
			}
		}
		.tips{
			font-size: 24rpx;
			font-weight: 600;
			color: #333333;
			line-height: 36rpx;
			margin-bottom: 20rpx;
		}
		.goods{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			background: #FFFFFF;
			    box-shadow: 2px 2px 8px 3px rgba(230, 230, 230, 0.5);
			border-radius: 16rpx;
			image{
				width: 210rpx;
				height: 210rpx;
				margin: 3rpx 10rpx;
				border-radius: 16rpx;
			}
			.cont{
				width: calc(100% - 216rpx);
				box-sizing: border-box;
				padding: 22rpx 28rpx;
				.name{
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}
				.link{
					.num{
						display: inline-block;
						border-radius: 19rpx;
						position: relative;
						background: #ECC67A;
						font-size: 0;
						padding: 8rpx 46rpx;
						display: flex;
						align-items: center;
						width: 80%;
						image{
							width: 24rpx;
							height: 26rpx;
						}
						text{
							font-size: 20rpx;
							font-weight: 600;
							color: #333333;
						}
					}
				}
				.des{
					font-size: 24rpx;
					font-weight: 600;
					color: #8C8C8C;
					margin-top: 40rpx;
				}
			}
		}
		.price_t{
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			line-height: 21rpx;
		}
		.price_val{
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-left:20rpx;
		}
		.exchange{
			background:#EFBE62;
			color: #333333;
			border-color:1px solid red;
			margin-top:20rpx;
			// width: 342px;
			height: 90rpx;
			border-radius: 23rpx;
		}
		.Gtitle{
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			line-height: 42rpx;
			margin-top: 70rpx;
			margin-bottom: 34rpx;
		}
		.line{
			display: flex;			align-items: center;
		
		}
		::v-deep .u-textarea{
			background-color: #F8f8f8;
			border: 0;
			margin-bottom: 20rpx;
			textarea{
				color: #333333;
			}
			
		}
		::v-deep button{
			border: 0;
			background: #EFBE62;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			height: 90rpx;
		}
		.illustrate{
			font-size: 20rpx;
			font-weight: 600;
			color: #878787;
			line-height: 38rpx;
		}
	}
</style>
